<template>
  <!-- 参赛选手管理 -->
  <!-- 按钮 -->
  <el-row class="el_row_btn">
    <el-col :span="24" class="content">
      <div class="content_top_btn">
        <div></div>
        <div>
          <el-space>
            <el-input
              class="top_search_inp"
              v-model="query_data.studentName"
              clearable
              placeholder="搜素：学员姓名"
            />
            <el-input
              class="top_search_inp"
              v-model="query_data.phone"
              clearable
              placeholder="搜素：手机号码"
            />
            <el-button
              size="large"
              :icon="Search"
              circle
              :loading="loading"
              @click="
                () => {
                  handleLoad(true);
                }
              "
            />
            <!-- <el-button
              size="large"
              :icon="Delete"
              circle
              @click="handleRest"
            /> -->
          </el-space>
        </div>
      </div>
    </el-col>
  </el-row>
  <!-- 内容 -->
  <el-table
    :data="data"
    border
    style="width: 100%"
    v-loading="loading"
    empty-text="暂无参赛选手"
  >
    <el-table-column label="学生ID" prop="studentId" width="80" />
    <el-table-column label="姓名" prop="studentName" width="100">
    </el-table-column>
    <el-table-column label="手机号码" prop="phone" width="120" />
    <el-table-column label="性别" prop="gender" width="72">
      <template #default="scope">
        <el-tag v-if="scope.row.gender == 0" type="danger">女</el-tag>
        <el-tag v-if="scope.row.gender == 1" type="primary">男</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="证件照" prop="documentImg">
      <template #default="scope">
        <el-popover placement="right">
          <template #reference>
            <el-icon size="20" style="cursor: pointer">
              <View />
            </el-icon>
          </template>
          <ImageComponent :src="scope.row.documentImg" />
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="学校" prop="schoolName" />
    <el-table-column label="奖项" prop="awards" />
    <el-table-column label="城市赛积分" prop="cityIntegral" />
    <el-table-column label="锦标赛积分" prop="championship" />
    <el-table-column label="分数" prop="score" />
    <el-table-column label="创建时间" prop="createTime" width="180" />
    <el-table-column label="操作" prop="Address" width="100">
      <template #default="scope">
        <el-dropdown
          trigger="click"
          @command="(value) => handleOperate(value, scope.row)"
        >
          <span class="el_dropdown_link">
            操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit-info"
                ><el-icon> <EditPen /> </el-icon>编辑信息</el-dropdown-item
              >
              <el-dropdown-item command="remove-item">
                <el-icon> <CircleClose /> </el-icon>删除人员
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="total"
      @current-change="handlePage"
    />
  </div>
  <!-- ---------------------------------------------------------------------------- 弹窗 -->
  <!-- 编辑信息 -->
  <el-dialog
    v-model="info_modal"
    title="编辑信息"
    class="info-modal"
    width="960px"
  >
    <InfoForm
      ref="InfoModal"
      @sub="
        info_modal = false;
        handleLoad(true);
      "
    />
  </el-dialog>
</template>

<script  setup>
// 导入API函数、组件和其他依赖
import { GetInformationApi, DeleteStudentApi } from "@/api/manage/institution";
// 导入Vue的生命周期钩子和响应式API
import { onMounted, ref, nextTick } from "vue";
// 导入自定义钩子
import { usePage } from "@/hooks/usePage";
// 导入子组件
import InfoForm from "./components/stu-info-form.vue";
// 导入Element Plus的弹窗和消息提示组件
import { ElMessageBox, ElMessage } from "element-plus";
// 导入图片预览组件
import ImageComponent from "@/components/image-component/index.vue";
// 导入Element Plus的图标
import { Delete, Search, View } from "@element-plus/icons-vue";
// 导入Vuex的用户状态管理store
import { useUserStore } from "@/store/user";

// 使用Vuex的用户状态管理store
const userStore = useUserStore();

// 使用自定义数据钩子获取和管理参赛选手数据
const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
  api_fn: GetInformationApi,
  q_data: {
    studentName: "",
    phone: "",
  },
});
/**
 * 信息弹窗数据
 */
const info_modal = ref(false);
const InfoModal = ref();
/**
 * 重置
 */
const handleRest = () => {
  query_data.value.phone = "";
  query_data.value.studentName = "";
  handleLoad(true);
};

/**
 * 处理操作按钮点击事件的函数，包括编辑信息和删除人员
 */
const handleOperate = (command, row) => {
  if (command == "edit-info") {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能");
      return;
    }
    // 更新
    info_modal.value = true;
    nextTick(() => {
      InfoModal.value.handleGetInfo(row);
    });
  } else if (command == "remove-item") {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能");
      return;
    }
    // 删除
    ElMessageBox.confirm("是否删除该选手", "提示", {
      "cancel-button-text": "取消",
      "confirm-button-text": "确定",
    }).then(async () => {
      let res = await DeleteStudentApi({
        studentId: row.studentId,
      });
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        ElMessage.success(res.message);
      }
      handleLoad(true);
    });
  }
};
// 将handleLoad函数暴露给组件外部
defineExpose({
  handleLoad,
});

onMounted(() => {
  handleLoad(true);
});
</script>

<style lang="scss" scoped>
.header_information {
  .header_name {
    margin-left: 10px;
    margin-right: 10px;
    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }
    h1 {
      font-size: 28px;
    }

    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }
  //   内容
  :deep(.table_btn_success) {
    padding: 0 5px !important;
    border: none;
  }
  :deep(.el-table) .cell {
    padding: 0 10px;
  }
  .el_row_btn {
    margin-bottom: 20px;

    .content {
      .content_top_btn {
        display: flex;
        justify-content: space-between;
        :deep(.tob_tabs) {
          span {
            font-size: 14px !important;
          }
        }
        .top_search_inp {
          width: 300px;
          height: 40px;
          margin-right: 5px;
        }
        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }
      }
    }
  }
  .el_dropdown_link {
    font-size: 14px;
  }
  :deep(.el-table)__cell {
    padding: 12px 0 !important;
  }
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
</style>